<!--
* @FileDescription:三恒历史联动 
* @Author: yuec621@outlook.com
* @Date: 2025-10-13 09:06:06
* @LastEditors: Please set LastEditors
* @LastEditTime: 2025-10-13 09:06:06
-->
<template>
    <div class="pagestyle">
        <list_controller :showCaozuo="state.showCaozuo" :noprintDownShow="true" @query="query" ref="zujianname" :options="state.options"
            @cellClickEvent="cellClickEvent">
            <template v-slot:opraCurdBtnAll>
                <span :class="state.listBtnType == 1 ? 'listInfoBtn active' : 'listInfoBtn'
                    " @click="listInfoBtnClick(1)">
                    <svg-icon :class="state.listBtnType == 1 ? 'active' : ''" class-name="search-icon"
                        icon-class="qiehuan" />
                    三恒实时联动
                </span>
                <span :class="state.listBtnType == 3 ? 'listInfoBtn active' : 'listInfoBtn'
                    " @click="listInfoBtnClick(3)">
                    <svg-icon :class="state.listBtnType == 3 ? 'active' : ''" class-name="search-icon"
                        icon-class="dayin" />
                    打印
                </span>
                <span :class="state.listBtnType == 4 ? 'listInfoBtn active' : 'listInfoBtn'
                    " @click="listInfoBtnClick(4)">
                    <svg-icon :class="state.listBtnType == 4 ? 'active' : ''" class-name="search-icon"
                        icon-class="xiazai" />
                    下载
                </span>
                <div class="xiazai" v-if="state.showDownload && state.listBtnType == 4">
                    <div class="item" @click="downloadFn(1)">下载当前页</div>
                    <div class="item" @click="downloadFn(2)">下载全部页</div>
                </div>
            </template>
            <template v-slot:selectNamelist> 三恒历史联动 </template>
        </list_controller>
    </div>
</template>
<script setup>
import list_controller from "@/components/commonCom/list_controller";
import {
    computed,
    nextTick,
    onMounted,
    reactive
} from "vue";
import {
    table_headers
} from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import {
    ElMessage,
    ElMessageBox,
    ElNotification
} from "element-plus";
import dayjs from "dayjs";
import {
    searchareaTree
} from "@/api/config";
const {
    proxy
} = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
let previewHttps =
    import.meta.env.VITE_APP_HTTP;
const upload = ref(null);

let state = reactive({
    detailsShow: false,
    detailsList: [],
    tempList: [],
    fillayaComShow: false, //控制填写分析抽屉显示
    listBtnType: undefined,
    options: {
        tableheads: computed(() => table_headers.hisLinkageControl),
        queryList: {
            querys: [{
                fieldsearch: "conditionType",
                field: "conditionType",
                title: "查询方式",
                type: "radiospecial",
                binddata: 1,
                options: [{
                    label: "时间查询",
                    value: 1,
                },
                {
                    label: "班次查询",
                    value: 2,
                },
                ],
            },
            {
                field: ["startTime", "endTime"],
                fieldsearch: ["startTime", "endTime"],
                title: "时间范围",
                col: 12,
                type: "datetimestartEnd",
                binddata: [dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'), dayjs().format(
                    'YYYY-MM-DD HH:mm:ss')],
                typespecial: 2,
                show: false,
            },
            {
                field: "datetime",
                fieldsearch: "datetime",
                title: "日期",
                type: "datetime",
                binddata: dayjs().format('YYYY-MM-DD'),
                typespecial: 1,
                show: true,
            },
            {
                fieldsearch: "banci",
                field: "banci",
                title: "班次选择",
                type: "selectspecial",
                binddata: "",
                options: [],
                typespecial: 1,
                show: true,
            },
            {
                field: "linkageTarget",
                title: "联动目标",
                type: "select",
                binddata: "",
                options: [{
                    label: '人员定位',
                    value: '人员定位'
                }, {
                    label: '广播、程控',
                    value: '广播、程控'
                }],
            },
            {
                field: "linkageType",
                title: "联动类型",
                type: "select",
                binddata: "",
                options: [{
                    label: '报警',
                    value: '报警'
                }, {
                    label: '断线',
                    value: '断线'
                }, {
                    label: '标校',
                    value: '标校'
                }, {
                    label: '预报警',
                    value: '预报警'
                }, {
                    label: '联动测试',
                    value: '联动测试'
                }],
            },
            {
                field: "typeName",
                title: "数据类型",
                type: "select",
                binddata: "",
                options: [{
                    label: '测点',
                    value: '测点'
                }, {
                    label: '组合报警',
                    value: '组合报警'
                }],
            },
            ],
        },
        dataUrl: "/hisLinkageControl/list",
    },
    banciList: [],
    showDownload: false,
    showCaozuo: true,
    data: {},
    areaObj: {
        condition: 'D',
        flag: "hisContinuationSwitch",
        isShowLocal: false
    },
    descObj: {},
    showChart: false,
    chartData: {},
});

// 下载列表内容
const downloadFn = async (n) => {
    state.showDownload = false
    state.listBtnType = undefined;
    if (n == 1) {
        proxy.$refs['zujianname'].vxe.xGrid.exportData({
            filename: '当前页下载数据',
            sheetName: 'Sheet1',
            type: 'xlsx',
        })
    } else if (n == 2) {
        await proxy.$refs.zujianname.getAllData(state.descObj);
        setTimeout(() => {
            proxy.$refs['zujianname'].vxe.xGrid.exportData({
                filename: '全部页下载数据',
                sheetName: 'Sheet1',
                type: 'xlsx',
                data: proxy.$refs['zujianname'].state.allData
            })
        }, 100);
    } else if (n == 3) {
        proxy.$refs['zujiannametwo'].vxe.xGrid.exportData({
            filename: '当前页下载数据',
            sheetName: 'Sheet1',
            type: 'xlsx',
        })
    } else if (n == 4) {
        await proxy.$refs.zujiannametwo.getAllData(state.descObj);
        setTimeout(() => {
            proxy.$refs['zujiannametwo'].vxe.xGrid.exportData({
                filename: '全部页下载数据',
                sheetName: 'Sheet1',
                type: 'xlsx',
                data: proxy.$refs['zujiannametwo'].state.allData
            })
        }, 100);
    }
}
// 打印顶部内容模板
const topHtml = `
  <h1 class="title">历史馈电异常</h1>
  `
// 打印样式
const printStyle = `
  .title {
    text-align: center;
  }
  `
// 打印列表内容
const printList = (n) => {
    if (n == 1) {
        proxy.$refs['zujianname'].vxe.xGrid.print({
            style: printStyle,
            beforePrintMethod: ({
                content
            }) => {
                return topHtml + content
            }
        })
    } else if (n == 2) {
        proxy.$refs['zujiannametwo'].vxe.xGrid.print({
            style: printStyle,
            beforePrintMethod: ({
                content
            }) => {
                return topHtml + content
            }
        })
    }
}

function listInfoBtnClick(type) {
    state.listBtnType = type;
    if (type == 1) {
        goPage()
    }
    if (type == 2) {
        if (store.records.length == 0 || store.records.length > 1) {
            ElMessage.error('请选择一个测点')
            state.listBtnType = undefined;
            return
        } else {
            state.showChart = !state.showChart
            state.chartData = {
                pointIds: [store.records[0].pointId],
                queryStartTime: store.records[0].prealarmStartTime,
                queryEndTime: store.records[0].prealarmEndTime,
            }
        }
    }
    if (type == 3) {
        printList(1)
    }
    if (type == 4) {
        state.showDownload = !state.showDownload
    }
    if (type == 5) {
        printList(2)
    }
    if (type == 6) {
        state.showDownload = !state.showDownload
    }
}

function query(type) {
    if (type.item && (type.item.field == "isShowLocal"
        || type.item.type == 'datetimestartEnd')) {
        state.areaObj.isShowLocal = type.val
        getconditionList(state.areaObj)
    }
    if (type == 2) {
        proxy.$refs.zujiannametwo.state.tabledata = []
        getconditionList({})
    }
    if (type.type == 4) {
        state.options.queryList.querys.forEach((item) => {
            if (item.field == "condition") {
                if (type.val != null) {
                    item.binddata = type.val;
                    state.areaObj["condition"] = type.val;
                } else {
                    state.areaObj["condition"] = 'D';
                }
            }
        });
        getconditionList(state.areaObj);
    }
    if (type.type == 44) {
        state.options.queryList.querys.forEach((item) => {
            if (item.type == 'cascaderRadioSpecial') {
                if (item.binddata == '' || !item.binddata) {
                    state.areaObj['areaName'] = type.val1
                    getconditionList(state.areaObj);
                }
            }
        })
    }
    if (type.type == 5 && type.item.type != 'datetimestartEnd') {
        let dataObj = {
            dateSuffix: undefined,
            classInfo: {},
        };
        state.options.queryList.querys.forEach((item) => {
            if (type.val1) {
                dataObj.dateSuffix = type.val1
                if (item.fieldsearch == "banci") {
                    state.banciList.forEach((itemsub) => {
                        if (itemsub.id == item.binddata) {
                            dataObj.classInfo = itemsub;
                            dataObj.typeLabel = 2
                            banciList(dataObj);
                        }
                    });
                }
            } else {
                if (item.fieldsearch == "datetime") {
                    dataObj.dateSuffix = item.binddata;
                }
            }
            if (item.fieldsearch == "banci") {
                state.banciList.forEach((itemsub) => {
                    if (type.val == 0) {
                        type.val = state.banciList[0].id
                    }
                    if (itemsub.id == type.val) {
                        dataObj.classInfo = itemsub;
                        dataObj.typeLabel = 2
                        banciList(dataObj);
                    }
                });
            }
        });
    }
    if (type.type == 'topConnectBom') {
        state.descObj = type.data
        // proxy.$refs.zujiannametwo.state.tabledata = []
    }
}

function getbanciList() {
    axios.post("/class/info/searchAll", {}).then((res) => {
        state.banciList = res.data.list;
        state.options.queryList.querys.forEach((item) => {
            if (item.fieldsearch == "banci") {
                item.options = res.data.list.map((item) => {
                    return {
                        label: item.className,
                        value: item.id,
                    };
                });
                item.binddata = item.options[0].value
            }
        });
    });
    axios.post('/pump/list', {}).then(res => {
        state.options.queryList.querys.forEach((item) => {
            if (item.field == "samplePointName") {
                item.options = res.data.list.map(item => {
                    return {
                        label: item.samplePointName,
                        value: item.samplePointName
                    }
                })
            }
        })
    })
}
getbanciList();

function banciList(dataObj) {
    axios.post("/hisPointFeed/handleClassInfo", dataObj).then((res) => {
        state.options.queryList.querys.forEach((item) => {
            if (dataObj.typeLabel != 2 || state.options.queryList.querys[0].binddata == 2) {
                if (item.type == "datetimestartEnd") {
                    item.binddata = [res.data.feedStartTime, res.data.feedEndTime];
                }
            }
        });
    });
}

function getSelList() {
    axios.post("/hisPointFeed/listAllNames", {
        flag: false
    }).then((res) => {
        state.options.queryList.querys.forEach((item) => {
            if (item.field == "condition") {
                item.options = [res.data[0]];
            }
        });
    });
    searchareaTree().then((res) => {
        state.options.queryList.querys.forEach((item) => {
            if (item.field == "area") {
                item.options = res.data;
            }
        });
    });
}

function getconditionList(dataObj) {
    state.options.queryList.querys.forEach((item) => {
        if (item.type == "datetimestartEnd") {
            dataObj.startTime = dayjs(item.binddata[0]).format('YYYY-MM-DD HH:mm:ss 000')
            dataObj.endTime = dayjs(item.binddata[1]).format('YYYY-MM-DD HH:mm:ss 000')
        }
    });
    axios
        .post("/hisPointFeed/conditionList", dataObj)
        .then((res) => {
            state.options.queryList.querys.forEach((item) => {
                if (item.type == "cascaderRadioSpecial") {
                    item.options = res.data;
                }
            });
        });
}
getconditionList(state.areaObj)
getSelList();
// 跳转实时馈电异常页面
const goPage = () => {
    router.push({
        name: 'Link_realLinkSH'
    })
}
// 关闭曲线
const closeChart = () => {
    state.listBtnType = undefined
    state.showChart = false
}
onMounted(() => {
});
</script>
<style lang="scss" scoped>
.xiazai {
    position: absolute;
    top: 42px;
    right: 110px;
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 99;

    .item {
        width: 100%;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .item:hover {
        background-color: #ececec;
    }
}

::v-deep .el-drawer {
    .querycss {
        .fsc {
            &:nth-child(2) {
                display: none;
            }
        }
    }

    .table_box {
        .fsc {
            display: none;
        }
    }
}
</style>